<%@ Page Title="Collapse content" Language="C#" MasterPageFile="~/Demo.master" Inherits="DemoPage" %>

<%@ Register Src="~/CodeFormatter.ascx" TagName="Code" TagPrefix="demo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="DemoHolder" runat="Server">
    <div class="dna-state-help ui-corner-all" style="margin-bottom: 10px;">
        Click the selected tab to toggle its content closed/open. To enable this functionality,
        set the <b>Collapsible</b> property to true.
    </div>
    <DotNetAge:Tabs ID="Tabs1" runat="server" Collapsible="true">
        <Views>
            <DotNetAge:View ID="View3" runat="server" Text="About Tabs">
                <p>
                    Tabs is a ASP.NET WebControl that encapsulated the jQuery UI tabs plugin.Tabs are
                    generally used to break content into multiple sections that can be swapped to save
                    space, much like an Accordion.
                </p>
                <p>
                    By default a Tabs will swap between tabbed sections onClick, but the events can
                    be changed to onHover through an property. Tab content can be loaded via Ajax by
                    setting an NavigateUrl on a View Control.
                </p>
            </DotNetAge:View>
            <DotNetAge:View ID="View5" runat="server" Text="About Accordion">
                <p>
                    The Accordion is a web control that allows you to provide multiple views and display
                    them one at a time. It is like having several Views where only one can be expanded
                    at a time. The Accordion is implemented as a web control that contains View web
                    controls. Accordion is a easy way to use jQuery accordion widget in ASP.NET.</p>
            </DotNetAge:View>
            <DotNetAge:View ID="View2" runat="server" Text="About Sortable">
                <p>
                    Sortable is a ASP.NET WebControl that encapsulat the jQuery UI resizable it makes
                    selected controls sortable by dragging with the mouse.
                </p>
                <p>
                    All ClientEvents receive two arguments: The original browser event and a prepared
                    ui object, view below for a documentation of this object:
                </p>
            </DotNetAge:View>
        </Views>
    </DotNetAge:Tabs>
    <br />
    <demo:Code runat="server" ID="codeView" SourceFile="~/Tabs/Codes/Collapse.aspx" />
</asp:Content>
